import React, { Component } from 'react';
import '../styles/SetUser.scss'
import { NavBar, List, Button, Modal, Toast } from 'antd-mobile'
import * as service from '../api/index'



class SetUser extends Component {
    constructor(props) {
        super(props)
        this.state = {
            username: '',
            userid: localStorage.getItem('userid'),
            visible: false,
            visible2: false,
            oldUserpass: '',
            newUserpass: ''

        }
    }
    back() {
        this.props.history.goBack()
    }
    changename(e) {
        console.log(e.target.name, e.target.value);
        this.setState({ [e.target.name]: e.target.value })
    }
    changepass(e) {
        this.setState({ [e.target.name]: e.target.value })
    }
    async reviseUaername() {//修改用户名
        console.log({ userid: this.state.userid, username: this.state.username });
        var res = await service.user_bindusername({ userid: this.state.userid, username: this.state.username })
        if (res.data.code == 200) {
            Toast.show({
                content: '用户名修改成功',
                duration: 1000,
            })
            localStorage.setItem('usernames', this.state.username)
        } else {
            Toast.show({
                content: '用户名修改失败',
                duration: 1000,
            })
        }
        this.setState({ username: '' })
    }

    async reviseUaerpass() {//修改用户密码  userid  oldpassword  newpassword
        var res = await service.user_updatePassword({ userid: this.state.userid, oldpassword: this.state.oldUserpass, newpassword: this.state.newUserpass })
        console.log(res);
        if (res.data.code == 200) {
            Toast.show({
                content: '密码修改成功,请重新登录',
                duration: 1000,
            })
            localStorage.clear()
            this.props.history.push('/login')
        } else {
            Toast.show({
                content: '密码修改失败',
                duration: 1000,
            })
        }
        this.setState({ oldUserpass: '', newUserpass: '' })

    }
    Signout() {//退出登录
        localStorage.clear()
        this.props.history.push('/login')
        Toast.show({
            content: '退出成功请重新登录',
            duration: 1000,
        })
    }
    render() {
        return (
            <div className='setuser' >
                <div className='header' >
                    <NavBar onBack={() => { this.back() }}> 设置</NavBar>
                </div>
                <div className="setmain">
                    <List >
                        <List.Item extra={localStorage.getItem('usernames')}
                            onClick={() => {
                                this.setState({ visible: true })
                            }}
                        >
                            <Modal
                                title='修改用户名'
                                visible={this.state.visible}//控制弹出层显示隐藏
                                content={//自定义弹出层内容
                                    <>
                                        <input name='username' value={this.state.username} onChange={(e) => { this.changename(e) }} className='username' type="text" placeholder='请输入用户名' />
                                    </>
                                }
                                closeOnAction={true}//点击操作按钮是否关闭弹出层
                                closeOnMaskClick={true}
                                onClose={() => {//点击按钮的回调函数
                                    if (this.state.username) {
                                        this.setState({ visible: false })
                                        this.reviseUaername()
                                    } else {
                                        this.setState({ visible: false })
                                    }

                                }}
                                actions={[//按钮的文字
                                    {
                                        key: 'confirm',
                                        text: '确认修改',
                                    },
                                ]}
                            />

                            绑定用户名
                        </List.Item>

                        <List.Item
                            onClick={() => {
                                this.setState({ visible2: true })
                            }}>

                            <Modal
                                title='修改用户密码'
                                visible={this.state.visible2}//控制弹出层显示隐藏
                                content={//自定义弹出层内容
                                    <>
                                        <span>旧密码:</span><input name='oldUserpass' value={this.state.oldUserpass} onChange={(e) => { this.changepass(e) }} className='oldUserpass' type="text" placeholder='请输入旧密码' /><br />
                                        <span>新密码:</span><input name='newUserpass' value={this.state.newUserpass} onChange={(e) => { this.changepass(e) }} className='newUserpass' type="text" placeholder='请输入新密码' />
                                    </>
                                }
                                closeOnAction={true}//点击操作按钮是否关闭弹出层
                                closeOnMaskClick={true}
                                onClose={() => {//点击按钮的回调函数
                                    if (this.state.oldUserpass && this.state.newUserpass) {
                                        this.setState({ visible2: false })
                                        this.reviseUaerpass()
                                    } else {
                                        this.setState({ visible2: false })
                                    }

                                }}
                                actions={[//按钮的文字
                                    {
                                        key: 'confirm2',
                                        text: '确认修改',
                                    },
                                ]}
                            />




                            修改密码
                        </List.Item>
                    </List>
                </div>
                <div className="footer">
                    <Button block type='submit' color='primary' size='middle' shape='rounded' onClick={() => { this.Signout() }} >
                        退出登录
                    </Button>
                </div>


            </div>
        );
    }
}

export default SetUser;